<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>杨青青个人博客</title>
    <link href="/static/homeconfig/css/base.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="/static/homeconfig/js/jquery.js"></script>
    <script src="/static/homeconfig/js/nav.js"></script>
    <style type="text/css">
        .ul1{
            display: flex;
            overflow: hidden;
            width: 1200px;
            flex-wrap: wrap;
        }
        .ul1 li{
            width: 220px;
        }
        .enlargeImg_wrapper {
            display: none;
            position: fixed;
            z-index: 999;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-color: rgba(52, 52, 52, 0.8);
            background-size: 50%;
        }
        img:hover {
            cursor: zoom-in;
        }
        .enlargeImg_wrapper:hover {
            cursor: zoom-out;
        }
    </style>
</head>
<body>
<!--header end-->
{include file="index/header"}
<!--header end-->
<main>
    <p class="weizhi">您现在的位置是：<a href="/" target="_blank">网站首页</a>><a href="/" target="_blank">我的相册</a></p>
    <div class="xiangce_list">
        <ul class="ul1">
            {foreach name="photos" id="val"}
            <li>
                    <img class="enlargeImg" src="{$val.src}">
            </li>
            {/foreach}
        </ul>
    </div>
    <div id="canvas" class="canva-image">

    </div>
</main>
<!--footer end-->
{include file="index/footer"}
<!--footer end-->
<script type="text/javascript">
    $(function() {
        enlargeImg();
    })
    //查看大图
    function enlargeImg() {
        $(".enlargeImg").click(function() {
            $(this).after("<div onclick='closeImg()' class='enlargeImg_wrapper'></div>");
            var imgSrc = $(this).attr('src');
            $(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");
            $('.enlargeImg_wrapper').fadeIn(200);
        })
    }
    //关闭并移除图层
    function closeImg() {
        $('.enlargeImg_wrapper').fadeOut(200).remove();
    }

</script>
</body>
</html>
